<template>
	<div class="form equipInterface" style="height:100%;">
		<el-row>
			<el-button type="primary" size="mini" style='float:right' @click="addOrEdit">{{buttonType =='add'?'添加':'修改'}}</el-button>
		</el-row>
		<el-form label-width="120px" :inline="false" :model="form" :rules="rules" ref="portAddForm" class="form">
			<el-row>
				<el-col :span="12">
					<el-form-item label="脚本文件">

						<form style='visibility: hidden;width: 0;height: 0;'>
							<input type="file" name="file" id="sub-file" @change="getFile" multiple="multiple">
						</form>

						<el-tag class="fileTag" style="width:calc(100% - 56px);">{{fileName}}</el-tag>
						<!--@close="removeTag"-->
						<!--<el-tag style="width:calc(100% - 56px);height:28px;padding:0;position:relative; float:left;margin-top:6px;border:1px solid #E4E7ED"
						>{{fileName}}</el-tag>-->
						<!--<el-button type="text" size="mini"  style="width:calc(100% - 56px);height:28px;padding:0; float:left;margin-top:6px;border:1px solid #E4E7ED"> {{fileName}} </el-button>-->
						<el-button @click="uploadClick" type="primary" size="mini" style="">上传</el-button>

					</el-form-item>

				</el-col>
				<el-col :span="12">
					<el-form-item label="类型" prop="interfaceType">
						<el-select v-model="form.interfaceType" placeholder="请选择" size="mini" style="width:100%;">
							<el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
						<!--<el-input size="mini" v-model="form.interfaceType" placeholder="请输入"></el-input>-->

					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="工作站" prop="workstationFilePath">
						<el-input size="mini" v-model="form.workstationFilePath" placeholder="请输入工作站文件路径"></el-input>
					</el-form-item>

				</el-col>
				<el-col :span="12">
					<el-form-item label="文件地址" prop="fileServerAddress">
						<el-input size="mini" v-model="form.fileServerAddress" placeholder="请输入文件服务器地址" disabled></el-input>
					</el-form-item>
					<!--<el-form-item label="接口:" prop="interFace">
						<el-input size="mini" v-model="form.interFace" placeholder="请输入接口"></el-input>
					</el-form-item>-->
				</el-col>

			</el-row>
			<el-row>
				<el-col :span="12">

				</el-col>
				<el-col :span="12">
					<el-form-item label="存放地址" prop="serverStoragePath">
						<el-input size="mini" v-model="form.serverStoragePath" placeholder="请输入服务器存放路径" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="备份地址:" prop="serverBackupPath">
						<el-input size="mini" v-model="form.serverBackupPath" placeholder="请输入服务器备份路径" disabled></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div class="anaTable">
			<div style="height:40px;line-height:40px;">
				<el-row>
					<el-col :span="12">
						<p>分析项</p>
					</el-col>
					<el-col :span="12">
						<el-button style="float: right;" type="primary" size="mini" @click="show = true">添加分析项</el-button>
					</el-col>
				</el-row>
			</div>
			<el-table :data="analysisBeanList" style="width: 100%;height:calc(100% - 40px)" class="tableCon" size="mini" key="analysisBeanList">
				<el-table-column label="序号" min-width="50px">
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
				<el-table-column property="reportWord" label="报告中名称" min-width="100px">
				</el-table-column>
				<el-table-column property="name" label="系统中名称" min-width="100px">
				</el-table-column>
				<el-table-column label="操作" fixed="right" min-width="50px">
					<template slot-scope="scope">
						<el-button type="text" size="mini" @click="del(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!--弹窗-->
		<el-dialog :visible.sync="show" @close="close" width="55%" class="addasaDialog" :show-close='false' :closeOnClickModal='false'
		 append-to-body>
			<span slot="title" class="dialog-title">
		  	添加分析项
			<el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
			<el-form label-width="120px" :inline="false" class="demo-form-inline " :model="formDialog" :rules="rulesDialog" ref="portAddFormDialog">
				<el-row>
					<el-form-item label="报告中名称:" prop="reportWord">
						<el-input size="mini" v-model="formDialog.reportWord" placeholder="请输入"></el-input>
					</el-form-item>

				</el-row>
				<el-row>
					<el-form-item label="系统中名称:" prop="name">
						<el-input size="mini" v-model="formDialog.name" placeholder="请输入"></el-input>
					</el-form-item>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button class="penalButton" type="primary" size="mini" @click="add">确定</el-button>
				<el-button class="penalButton" size="mini" @click="close">取消</el-button>
			</span>

		</el-dialog>
		<!--<div v-if="show">
			<div class="popupMask">
				<div class="popupPenal">
					<div class="popPenalTitle">
						<div class="popPenalTitleName">
							添加分析项
						</div>
					</div>
					<div class="penalContent">
						<div class="form">
							<el-form label-width="120px" :inline="false" class="demo-form-inline " :model="formDialog" :rules="rulesDialog" ref="portAddFormDialog">
								<el-row>
									<el-col :span="12">
										<el-form-item label="报告中名称:" prop="name">
											<el-input size="mini" v-model="formDialog.name" placeholder="请输入"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="11">
										<el-form-item label="系统中名称:" prop="reportWord">
											<el-input size="mini" v-model="formDialog.reportWord" placeholder="请输入"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="1"> </el-col>
								</el-row>
							</el-form>
						</div>
					</div>
					<div class="penalFooter">
						<el-button class="penalButton" type="primary" size="mini" @click="add">确定</el-button>
						<el-button class="penalButton" size="mini" @click="close">取消</el-button>
					</div>
				</div>
			</div>
		</div>-->
	</div>
</template>

<script>
	export default {
		props: { portData: Object },
		data() {
			return {
				buttonType: 'add',
				form: {
					equipment: '',
					interfaceType: "",
					workstationFilePath: '',
					fileServerAddress: '',
					serverStoragePath: '',
					serverBackupPath: '',
					interFace: '',

				},
				rules: {
					name: [{ required: true, type: 'string', message: '请选择', trigger: 'blur' },],
					interfaceType: [{ required: true, message: '请选择', trigger: 'change' }]

				},
				show: false,
				analysisBeanList: [],
				formDialog: {
					fRef: '',
					name: '',
					reportWord: '',
				},
				rulesDialog: {
					name: [{ required: true, type: 'string', message: '请选择', trigger: 'blur' },],
					reportWord: [{ required: true, type: 'string', message: '请选择', trigger: 'blur' },],
				},
				fileName: "",
				typeOption: [{
					value: "PDF",
					label: "pdf文件"
				}, {
					value: "EXCEL",
					label: "excel文件"
				}],
				javaScriptPath: null,
			}
		},
		mounted() {
			console.log(this.portData)
			this.form.equipment = this.portData.id
			this.form.code = this.portData.code
			this.formDialog.fRef = this.portData.id

			this.init()
		},
		methods: {
			uploadClick() { //上传
				document.getElementById("sub-file").click()
			},
			getFile(event) {   //上传 把文件加入到files数组（必须循环）
				console.log(event.target.files)
				this.fileName = '';
				this.fileName = event.target.files[0].name
				this.form.file = event.target.files[0]
				console.log(this.form.file)
				event.target.value= "";

			},
			addOrEdit() {
				var mes = "修改"
				if(this.buttonType == 'add'){
					mes = "添加"
				}
				this.$confirm('是否' + mes, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$refs.portAddForm.validate((valid) => { //表单验证
						if (valid) {
							let url;
							var formData = new FormData();
							if (this.buttonType == 'add') {
								url = "resource/addEquipInterface.htm"
							} else {
								url = "resource/updateInterface.htm"

							}
							if (this.form.file == undefined) {
								this.$notify({
									title: "警告！",
									type: "warning",
									message: "请选择脚本文件",
								})
								return;
							}
							formData.append("id", this.form.id)
							formData.append("code", this.form.code)
							formData.append("file", this.form.file)
							formData.append("equipment", this.form.equipment);
							formData.append("interfaceType", this.form.interfaceType);
							formData.append("workstationFilePath", this.form.workstationFilePath)
							formData.append("fileServerAddress", this.form.fileServerAddress)
							formData.append("serverStoragePath", this.form.serverStoragePath)
							formData.append("serverBackupPath", this.form.serverBackupPath)
							formData.append("interFace", this.form.interFace)

							this.$http({
								method: 'post',
								apiUrl: url,
								params: formData,
								headers: { 'Content-Type': 'multipart/form-data' }
							}).then(res => {
								if (res.code == 0) {
									if (this.buttonType == 'add') {
										this.$message({
											showClose: true,
											message: '仪器添加成功！',
											type: 'success'
										})

									} else {
										this.$message({
											showClose: true,
											message: '仪器修改成功！',
											type: 'success'
										})
									}

									this.init();
								}
							})
						} else { }
					});
				})
			},
			init() {
				this.$http({
					apiUrl: 'resource/readEquipmentInterface.htm',
					method: 'get',
					params: { id: this.portData.id },
				}).then(res => {
					if (res.code == 0) {
						if (!!res.data.equipmentInterfaceBean) {
							this.buttonType = 'edit'
						} else {
							this.buttonType = 'add'
						}
						if (res.data) {
							this.analysisBeanList = res.data.analysisBeanList
							if (res.data.equipmentInterfaceBean != undefined) {
								this.form.id = res.data.equipmentInterfaceBean.id
								this.form.interfaceType = res.data.equipmentInterfaceBean.interfaceType
								this.form.workstationFilePath = res.data.equipmentInterfaceBean.workstationFilePath
								this.form.fileServerAddress = res.data.equipmentInterfaceBean.fileServerAddress
								this.form.serverStoragePath = res.data.equipmentInterfaceBean.serverStoragePath
								this.form.serverBackupPath = res.data.equipmentInterfaceBean.serverBackupPath
								this.form.interFace = res.data.equipmentInterfaceBean.interFace
								this.javaScriptPath = res.data.equipmentInterfaceBean.javaScriptPath
								var str = res.data.equipmentInterfaceBean.javaScriptPath
								var index = str.lastIndexOf("/");
								str = str.substring(index + 1, str.length);
								this.fileName = str;
								this.form.file = res.data.equipmentInterfaceBean.javaScriptPath
							}


						}
					}
				})
			},
			// downLoad() {
			// 	if (this.form.file != undefined && this.javaScriptPath != null) {
			// 		var url = "download/linuxDownload.htm"
			// 		window.open(process.env.baseUrl  + url + '?path=' + this.form.file);
			// 	}
			// },
			submit() {
				this.$refs.portAddForm.validate((valid) => {
					if (valid) {
						this.$http({
							apiUrl: 'resource/addEquipInterface.htm',
							method: 'post',
							params: this.form,
						}).then(res => {
							if (res.code == 0) {
								this.$parent.close()
							}
						})
					} else {
						return false
					}
				})
			},
			add() {
				this.$refs.portAddFormDialog.validate((valid) => {
					if (valid) {
						this.$http({
							apiUrl: 'resource/addAnalysis.htm',
							method: 'post',
							params: this.formDialog,
						}).then(res => {
							if (res.code == 0) {
								this.show = false
								this.$message({
									showClose: true,
									message: '分析项添加成功！',
									type: 'success'
								})
								this.init()
							}
						})
					} else {
						return false
					}
				})
			},
			del(index, row) {
				this.$confirm('是否删除"' + row.name + '"?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						apiUrl: 'resource/deleteAnalysis.htm',
						method: 'get',
						params: { id: row.id },
					}).then(res => {
						if (res.code === 0) {
							this.init()
							this.$message({
								showClose: true,
								type: 'success',
								message: '分析项删除成功!'
							})
						}
					})
				}).catch(() => { })
			},
			close() {
				this.show = false
			},
		}
	}

</script>

<style>
	.el-tag .el-icon-close {
		position: absolute;
		right: 5px;
		top: 6px;
	}

	.equipInterface .fileTag {
		height: 28px;
		line-height: 28px;
		padding: 0 5px;
		position: relative;
		float: left;
		margin-top: 6px;
		border: 1px solid #E4E7ED;
		background: #F5F7FA;
		cursor: pointer;
	}

	.equipInterface .form {
		height: 180px;
	}

	.equipInterface .anaTable {
		height: calc(100% - 218px)
	}
	.addasaDialog  .el-dialog {
		height: 60%;
	}
</style>